import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Button, Icon, notification, Row, Col } from 'antd';
// 引入第三方模块;
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

import ProfileLayout from './PageHeader';
import MyIcon from '../../assets/font-class/Icon';
import styles from './demo.less';

@connect(state => ({
  demos: state.demos,
}))
export default class ReactDemo1 extends PureComponent {
  state = {
    value: 'test',
  };

  handleChange = (value) => {
    this.setState({ value });
  };

  prompt = () => {
    notification.info({
    // notification.open({
      message: 'get value',
      description: <span dangerouslySetInnerHTML={{ __html: this.state.value }} />,
    });
  };

  render() {
    const { demos: { name } } = this.props;
    return (
      <ProfileLayout title="测试DVA">
        <Row className={styles.baseBg}>
          <Col span={24}>
            <h4 className="boxContainer">React Demo2: {name}</h4>
            <Card title="富文本编辑器">
              <ReactQuill placeholder="请简单描述" value={this.state.value} onChange={this.handleChange} />
              <Button style={{ marginTop: 16 }} onClick={this.prompt}>Prompt</Button>
            </Card>
            <div className="boxContainer">文本的值: {this.state.value}</div>
            <div className="boxContainer">
              <h5>自定义的font class</h5>
              <MyIcon type="more" />
              <MyIcon type="js" />
              <MyIcon type="sass" />
            </div>
          </Col>
        </Row>
      </ProfileLayout>
    );
  }
}
